<script>
	import {
		Canvas,
		Scene,
		PerspectiveCamera,
		DoubleSide,
		DirectionalLight,
		AmbientLight,
		WebGLRenderer,
		CubeTextureLoader,
		TextureLoader
	} from 'svelthree';

	import Cube from './Cube.svelte';
	import { rotateCube } from './animations';

	let animation = rotateCube;
	let parentScale = [1, 1, 1];
	let childScale1 = [0.5, 0.5, 0.5];
	let childScale2 = [0.4, 0.4, 0.4];

	let offsetPos1 = 1;
	let pos1 = {
		left: [offsetPos1, -2, 0],
		right: [-offsetPos1, -1, 0],
		top: [0, offsetPos1, 0],
		bottom: [1, -offsetPos1, -1],
		front: [0, 0, offsetPos1],
		back: [0, 0, -offsetPos1]
	};

	let offsetPos2 = 0.7;
	let pos2 = {
		left: [offsetPos2, 0, 0],
		right: [-offsetPos2, 0, 0],
		top: [0, offsetPos2, 0],
		bottom: [0, -offsetPos2, 0],
		front: [0, 0, offsetPos2],
		back: [0, 0, -offsetPos2]
	};

	let svelteColor = 0xff3e00;
	let yellow = 0xf6e05e;
	let green = 0x68d391;
	let blue = 0x63b3ed;
	let mat1 = {
		roughness: 0.5,
		metalness: 0.5,
		opacity: 0.5,
		transparent: true,
		color: '#ff5',
		side: DoubleSide
	};

	let configlable1 = {
		pos: pos1.left,
		scale: childScale1,
		mat: {
			roughness: 0.5,
			metalness: 0.5,
			opacity: 1,
			transparent: true,
			side: DoubleSide,
			color: '#f40'
		}
	};
	//============================
	let cubeTextureLoader = new CubeTextureLoader();
	cubeTextureLoader.setPath('./img/3d/');
	//六张图片分别是朝前的（posz）、朝后的（negz）、朝上的（posy）、朝下的（negy）、朝右的（posx）和朝左的（negx）。
	let cubeTexture = cubeTextureLoader.load([
		'right.jpg',
		'left.jpg',
		'top.jpg',
		'bottom.jpg',
		'front.jpg',
		'back.jpg'
	]);
</script>

<Canvas let:sti w={1000} h={600}>
	<Scene {sti} let:scene id="scene1" props={{ background: cubeTexture }}>
		<PerspectiveCamera {scene} id="cam1" pos={[3, 2, 10]} lookAt={[0, 0, 0]} />
		<AmbientLight {scene} intensity={1.25} />
		<DirectionalLight {scene} pos={[3, 3, 3]} castShadow shadowMapSize={8 * 512} />

		<!-- Cube component as parent (level 0) -->
		<Cube
			{scene}
			scale={parentScale}
			let:parent
			mat={{ color: '#f40', opacity: 0.3, transparent: true }}
			{animation}
		>
			<!-- Cube components as children (level 1) -->
			<Cube {scene} {parent} {...configlable1} {animation} />
			<Cube {scene} {parent} scale={childScale1} pos={pos1.right} mat={mat1} />
			<Cube {scene} {parent} scale={childScale1} pos={pos1.top} mat={mat1} />
			<Cube {scene} {parent} scale={childScale1} pos={pos1.bottom} mat={mat1} />
			<Cube {scene} {parent} scale={childScale1} pos={pos1.back} mat={mat1} />

			<!-- Cube component as child / parent (level 1) -->
			<Cube {scene} {parent} let:parent scale={childScale2} pos={pos1.front} mat={{ color: green }}>
				<!-- Cube components as children (level 2) -->
				<Cube {scene} {parent} scale={childScale2} pos={pos2.left} mat={{ color: blue }} />
				<Cube {scene} {parent} scale={childScale2} pos={pos2.right} mat={{ color: blue }} />
				<Cube {scene} {parent} scale={childScale2} pos={pos2.top} mat={{ color: blue }} />
				<Cube {scene} {parent} scale={childScale2} pos={pos2.bottom} mat={{ color: blue }} />
				<Cube {scene} {parent} scale={childScale2} pos={pos2.front} mat={{ color: blue }} />
				<Cube {scene} {parent} scale={childScale2} pos={pos2.back} mat={{ color: blue }} />
			</Cube>
		</Cube>
	</Scene>

	<WebGLRenderer
		{sti}
		sceneId="scene1"
		camId="cam1"
		config={{ antialias: true, alpha: true }}
		enableShadowMap
	/>
</Canvas>
